<template>
  <div class="music-info">
    <div class="music-detail">
      <div class="detail_info">
        <div class="info_img" v-if="albumDetail.album_mid">
          <img :src="baseUrl+albumDetail.album_mid+'.jpg'" alt="">
        </div>
        <div class="info_more">
          <div class="name">{{albumDetail.album_name}}</div>
          <div class="singer" @click="toSingerDetail(albumDetail.singer_mid)">
            <span class="iconfont icon-ren111"></span>
            <span>{{albumDetail.singer_name}}</span>
          </div>
          <ul class="detail">
            <li>流派：<span>{{albumDetail.genre}}</span></li>
            <li>语种：<span>{{albumDetail.lan}}</span></li>
            <li>发行时间：<span>{{albumDetail.time}}</span></li>
            <li class="ellipsis">唱片公司：<span>{{albumDetail.company}}</span></li>
          </ul>
          <OtherInfo></OtherInfo>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  import OtherInfo from '../OtherInfo/OtherInfo'
  export default {
        name: "AlbumInfo",
        props:{
          albumDetail:Object
        },
        data(){
          return{
            baseUrl:'http://y.gtimg.cn/music/photo_new/T002R300x300M000',
          }
        },
        components:{
          OtherInfo
        },
        methods:{
          toSingerDetail(mid){
            this.$router.replace(`/singerdetail/${mid}`);
          }
        }
    }
</script>

<style scoped lang="less">
  .music-info .music-detail{width: 100%;background:linear-gradient(to bottom,#f2f2f2,#fafafa);margin: 0 auto;}
  .music-info .music-detail .detail_info{width: 1200px;margin: 0px auto; padding: 40px 0px;position: relative}
  .music-info .detail_info .info_img{width: 250px;height: 250px;display: inline-block;margin-right: 56px}
  .music-info .detail_info .info_img img{width: 250px;height: 250px;}
  .music-info .detail_info .info_more{display: inline-block;position: absolute;margin-top: 30px;top:40px}
  .music-info .detail_info .info_more .name{font-size: 30px;padding-bottom: 16px}
  .music-info .detail_info .info_more .singer .iconfont{color:#a2a2a2;}
  .music-info .detail_info .info_more .singer>span:hover{cursor: pointer;color: #31c27c}
  .music-info .detail_info .info_more .singer>span:hover>span{color: black;}
  .music-info .detail_info .info_more .detail{width:637px;padding: 8px 0px}
  .music-info .detail_info .info_more .detail li{display: inline-block;width: 316px;margin: 8px 0px}
  .music-info .detail_info .info_more .detail li:nth-child(1) span:last-child:hover{color: #31c27c;cursor: pointer}
  .music-info .detail_info .info_more .detail li:nth-child(4) span:last-child:hover{color: #31c27c;cursor: pointer}
</style>
</style>
